<!--
 * @Author: 陈俊升 761723995@qq.com
 * @Date: 2023-11-07 09:43:46
 * @LastEditors: 陈俊升 761723995@qq.com
 * @LastEditTime: 2023-12-13 11:19:11
 * @FilePath: /hr_new_vue3/src/views/Management/Contract/BaseSetting/ContractTemplate/Components/AddTemplate/ContractBaseInfo.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 合同原因 -->
<template>
  <div>
    <section>
      <header><span>变更合同信息</span></header>
      <a-form
        :model="formData.signData"
        ref="refForm"
        :rules="rules"
        auto-label-width
      >
        <a-form-item label="变更原因" field="userId" show-colon>
          <!-- <a-cascader
            :options="reasonOptions"
            :field-names="fieldNames"
            :style="{ width: '200px' }"
            placeholder="请选择"
          /> -->
          <a-select :style="{ width: '200px' }">
            <a-option
              v-for="item in reasonOptions"
              :key="item.id"
              :label="item.text"
            ></a-option>
          </a-select>
        </a-form-item>
        <a-form-item label="变更内容描述" field="remark" show-colon>
          <a-textarea
            v-model="userName"
            show-word-limit
            :max-length="300"
            allow-clear
            :auto-size="{
              minRows: 3
            }"
          ></a-textarea>
        </a-form-item>
        <a-form-item
          label="签署有效期"
          :content-flex="false"
          :merge-props="false"
          show-colon
        >
          <a-space>
            <a-form-item label="" field="remind" hide-label>
              <a-date-picker style="width: 200px" />
            </a-form-item>
            <a-form-item label="" field="remind" hide-label>
              签署有效期前
              <a-input-number
                v-model="formData.signData[currIndex].remind"
                style="width: 150px; margin: 0 10px"
                allow-clear
                hideButton
                button-text="Search"
                :min="1"
              >
                <template #append>
                  <span>天</span>
                </template>
              </a-input-number>
              进行提醒
            </a-form-item>
          </a-space>
        </a-form-item>
      </a-form>
    </section>
    <!-- <section>
      <header><span>选择变更审批信息</span></header>
    </section> -->
  </div>
</template>

<script setup lang="ts">
import { cloneDeep } from 'lodash';
import { PerformanceAppraisal } from '@/apis/management/performance/baseSetting/template/type';
import { GetGenerateContractNum } from '@/apis/management/contract/contractManagement/waitSigned';
import { GetContractStatusType } from '@/apis/management/contract/baseSetting';
import { CONTRACT_TYPE_CHANGE } from '@/utils/constants';
import { useVModel } from '@vueuse/core';
const props = withDefaults(
  defineProps<{
    data: any;
  }>(),
  {}
);
const rules = reactive({
  // templateName: [
  //   {
  //     required: true,
  //     message: '请输入'
  //   },
  //   {
  //     // validator: validateName
  //   }
  // ],
  way: [
    {
      required: true,
      message: '请选择'
    }
  ],
  overTime: [
    {
      required: true,
      message: '请选择'
    }
  ],
  expire: [
    {
      required: true,
      message: '请选择'
    }
  ],
  signature: [
    {
      required: true,
      message: '请选择'
    }
  ],
  remind: [
    {
      required: true,
      message: '请选择'
    }
  ]
});

const fieldNames = { value: 'id' };

const reasonOptions = ref([]);
const getContractReasonData = async () => {
  try {
    // for (let i of reasonOptions.value) {
    //   const res = await GetContractStatusType({
    //     type: i.id
    //   });
    //   res.map((el: any) => {
    //     el.label = el.text;
    //     return el;
    //   });
    //   i.children = res;
    // }
    const res = await GetContractStatusType({
      type: 1
    });
    reasonOptions.value = res;
    console.log('====================================');
    console.log(reasonOptions.value);
    console.log('====================================');
  } catch (error: unknown) {
    console.log(error);
  }
};
getContractReasonData();

const emit = defineEmits(['update:data']);
const formData = useVModel(props, 'data', emit);

let userName = ref('');
let currIndex = ref(0);
let refForm = ref([]);

const createRef = () => {
  props.data.userData;
};

watch(
  () => props.data.userData,
  (newVal: any) => {
    if (newVal) {
      userName.value = formData.value.userData[0].name;
    }
  },
  {
    deep: true
  }
);

watch(
  () => props.data.signData,
  (newVal: any) => {
    if (newVal) {
      //
    }
  },
  {
    deep: true
  }
);

const getContractNum = async (id: number, userId: number) => {
  try {
    const res = await GetGenerateContractNum({
      id,
      userId
    });
    return res;
  } catch (error: unknown) {
    console.log(error);
  }
};

watch(
  () => props.data.baseInfoData,
  async (newVal: any) => {
    if (newVal.templateId) {
      //
    }
  },
  {
    deep: true
  }
);

let contractName = ref('');
const changeContractName = (val: string) => {
  nextTick(() => {
    for (let i = 0; i < formData.value.signData.length; i++) {
      if (formData.value.signData[i].contractName === val) {
        currIndex.value = i;
        break;
      }
    }
  });
};

const validate = async () => {
  // const check = await refForm.value.validate();
  return undefined;
};
defineExpose({ validate });
</script>

<style lang="less" scoped>
section {
  header {
    font-weight: 700;
    height: 56px;
    line-height: 56px;
    margin-bottom: 20px;
    background-color: #f5f7fb;
    &::before {
      margin-left: 10px;
      content: '';
      display: inline-block;
      width: 6px;
      height: 40%;
      margin-right: 10px;
      background: #165dff;
      position: relative;
      top: 7px;
      border-radius: 3px;
    }
    span {
      &::before {
        content: '*';
        color: red;
      }
    }
  }
  .content {
  }
}
</style>
